import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:skeleton_text/skeleton_text.dart';

class Hello extends StatefulWidget {

  @override
  _HelloState createState() => _HelloState();
}

class _HelloState extends State<Hello> {



  ScrollController _controller = new ScrollController();
  bool showToTopBtn = false; //是否显示“返回到顶部”按钮

  @override
  void initState() {
    super.initState();
    //监听滚动事件，打印滚动位置
    _controller.addListener(() {
      print(_controller.offset); //打印滚动位置
      if (_controller.offset < 100 && showToTopBtn) {
        setState(() {
          showToTopBtn = false;
        });
      } else if (_controller.offset >= 200 && showToTopBtn == false) {
        setState(() {

          showToTopBtn = true;
        });
      }
    });
  }



  @override
  void dispose() {
    //为了避免内存泄露，需要调用_controller.dispose
    _controller.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("hello"),
      ),
      body:  Container(
        child: Stack(
          children: <Widget>[
            SkeletonAnimation(
              child: Container(
                height: MediaQuery.of(context).size.height / 1.2,
                margin: EdgeInsets.all(10),
                child: Shimmer.fromColors(
                    baseColor: Colors.pink,
                    highlightColor: Colors.cyanAccent,
                    period: Duration(milliseconds: 1300),
                    child: ListTile(
                      title:  Text(
                        "hello",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 100.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    )
                ),
                decoration: BoxDecoration(
                    color: Colors.grey[300],
                    borderRadius: BorderRadius.all(Radius.circular(10))),
              ),
              gradientColor: Color.fromARGB(0, 100, 200, 244),
            ),
            Container(
              margin: EdgeInsets.only(
                  top: MediaQuery.of(context).size.height / 1.5,
                  left: MediaQuery.of(context).size.width / 3.3),
              child: Padding(
                padding: const EdgeInsets.only(left: 15.0, bottom: 5.0),
                child: SkeletonAnimation(
                  child: Container(
                    height: 23,
                    width: MediaQuery.of(context).size.width * 0.3,
                    /* child: Text(
                                  picture[index]["description"],
                                  overflow: TextOverflow.ellipsis,
                                ),*/
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10.0),
                        color: Colors.white),
                  ),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(
                  top: MediaQuery.of(context).size.height / 1.4,
                  left: MediaQuery.of(context).size.width / 4.2),
              child: Padding(
                padding: const EdgeInsets.only(left: 15.0, bottom: 5.0),
                child: SkeletonAnimation(
                  child: Container(
                    height: 15,
                    width: MediaQuery.of(context).size.width * 0.45,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10.0),
                        color: Colors.white),
                  ),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(
                  top: MediaQuery.of(context).size.height / 1.33,
                  left: MediaQuery.of(context).size.width / 4.2),
              child: Padding(
                padding: const EdgeInsets.only(left: 15.0, bottom: 5.0),
                child: SkeletonAnimation(
                  child: Container(
                    height: 15,
                    width: MediaQuery.of(context).size.width * 0.45,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10.0),
                        color: Colors.white),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
